<style type="text/css">
    #scroll_wrapper {
        z-index: 1;
        background-color: #ffffff;
    }

    .navHeaderContainer .small-title {
        font-size: 22px;
        color: #999;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
    }

    li.noneBold {
        list-style-type: none;
        margin: 0 0 0 2px;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
    }

    li.none {
        margin: 0 0 0 2px;
        list-style-type: none;
        /*list-style:url(/mobilemode/images/position2.png) inside}*/
    }

    li.active {
        list-style-type: square;
        color: #008000;
    }

    ul.disc {
        list-style-type: disc;
        font-size: 16px;
        color: #B3B3B3;
        margin: 8px 0;
    }

    span.positionImage {
        background-image: url(/mobilemode/images/position5.png);
        background-repeat: no-repeat;
        padding-left: 20px;
        padding-bottom: 0px;
    }

    div.recordDiv {
        padding-bottom: 0px;
    }

    span.juhonglabel {
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        border-width: 1px;
        border-style: solid;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #ff5722;
        background-color: #fff;
        color: #ff5722;
        position: relative;
        display: inline-block;
        padding: 0 6px;
        font-size: 12px;
        text-align: center;
        border-radius: 2px;
    }

    span.greenlabel {
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        border-width: 1px;
        border-style: solid;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-color: #51b904;
        background-color: #fff;
        color: #51b904;
        position: relative;
        display: inline-block;
        padding: 0 6px;
        font-size: 12px;
        text-align: center;
        border-radius: 2px;
    }

    .btn {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        /* line-height: 1.428571429; */
        border-radius: 50px;
        background-color: #0080FF;
        border: 1px solid #d5d5d5;
        outline: none;
    }

    .btnorange {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        /* line-height: 1.428571429; */
        border-radius: 50px;
        background-color: #ff5722;
        border: 1px solid #d5d5d5;
        outline: none;
    }

    .btndisable {
        width: 100px;
        height: 100px;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        /* line-height: 1.428571429; */
        border-radius: 50px;
        background-color: #949ca6;
        border: 1px solid #d5d5d5;
        outline: none;
        pointer-events: none;
    }

    .disabled {
        pointer-events: none;
    }

    span.timeSpan {
        font-size: 15px;
    }

    div#myfloatbtn {
        user-select: none;
        position: fixed;
        text-align: center;
        color: #a10dec;
        margin: 0px;
        z-index: 90112;
        width: 55px;
        height: 55px;
        right: 20px;
        bottom: 50px;
        line-height: 55px;
        display: block;
        perspective: 1000px;
        background: url(/mobile/plugin/task/images/list_wev8.png) no-repeat;
        background-position: center center;
        background-color: #000;
        background-size: 42px;
        opacity: .3;
        border-radius: 8px;
        -webkit-tap-highlight-color: transparent;
        display: none;
    }

    .navHeaderContainer .btnWrap {
        display: block;
        font-size: 12px;
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 8px;
    }

    #waiqing {
        position: absolute;
        right: 20px;
        margin-top: 20px;
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 12px;
        color: #352d9e;
        /* line-height: 1.428571429; */
        /* border-radius: 50px; */
        background-color: #e9e8e7;
        border: 0px solid #d5d5d5;
        outline: none;
    }
</style>
<div>
    <div id="container" style="height:200px;width:100%;"></div>
    <div style="display:block;font-size: 14px;padding: 3px 10px;">当前位置：<span id="address">定位中...</span></div>

    <div id="record">
    </div>
</div>
<div id="myfloatbtn">外勤</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=noxDvacPFxnudsybXqwZKdr67SudUupK"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<script type="text/javascript">
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };

    function dateTimeStrCompare(dtstr1, dtstr2) { //"yyyy-MM-dd hh:mm"
        dtstr1 = dtstr1.replace("-", "/").replace("-", "/");//替换字符，变成标准格式
        var d1 = new Date(Date.parse(dtstr1));
        dtstr2 = dtstr2.replace("-", "/").replace("-", "/");//替换字符，变成标准格式
        var d2 = new Date(Date.parse(dtstr2));
        var n = 0;
        if (d1 > d2) {
            n = 1;
        } else if (d1 < d2) {
            n = -1;
        } else {
            n = 0;
        }
        return n;
    }
    //获取系统时间
    function getCurrentTime() {
        var myDate = new Date($.ajax({ async: false }).getResponseHeader("Date"));
        return myDate.format('hh:mm');
    }

    //获取系统
    function getCurrentDate() {
        var myDate = new Date($.ajax({ async: false }).getResponseHeader("Date"));
        return myDate.format('yyyy-MM-dd');
    }
    function getCurrentDateformat(patten) {
        var myDate = new Date($.ajax({ async: false }).getResponseHeader("Date"));
        return myDate.format(patten);
    }
    //注意全据变量的初始化顺序
    var curruserid = Mobile_NS.getCurrUser();//获取用户id;
    var currentDate = getCurrentDate();//获取当前日期
    // var jsonAll = getpaiban();//获取排班数据
    // var jsontime = jsonAll.jsontime;//获取排班打卡班次

    var currlng, currlat, kqlng, kqlat, kqfw, kqdd, curraddress, kqdbh;
    curraddress = '中山';
    var map = new BMap.Map("container", { enableMapClick: false });    // 创建Map实例
    var point = new BMap.Point(113.404942, 22.520568);
    map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别
    //map.setCurrentCity("中山");          // 设置地图显示的城市

    mobile_getCurrentPosition();

    //移动建模定位
    function mobile_getCurrentPosition() {
        Mobile_NS.showLoader();
        $("#address").text('定位中...');
        Mobile_NS.getCurrentPosition(function (result) {
            //alert("返回结果："+JSON.stringify(result) );
            var status = result["status"];
            if (status == "1") {
                var lng = result["lng"];
                var lat = result["lat"];
                var addr = result["addr"];
                curraddress = addr;
                var baiduPoint = new BMap.Point(lng, lat);
                if (lng == "" || lat == "") {
                    lng = 0;
                    lat = 0;
                    $("#address").text("定位失败，请确定是否授权定位");
                } else {
                    initMap(baiduPoint);
                    $("#address").text(addr);
                }
                setCircleLocation(lng, lat);
            } else {
                var errMsg = result["errMsg"];
                $("#address").text(errMsg);
                updateRecordView();//加载排班打卡
                Mobile_NS.Alert("errr:" + errMsg);
            }
        });
        setTimeout(function () {
            Mobile_NS.hideLoader();
        }, 5000);
    }

    function initMap(point) {
        map.clearOverlays();
        map.centerAndZoom(point, 17);
        map.setMinZoom(15);
        map.setMaxZoom(19);
        map.disableDragging();
        map.disableScrollWheelZoom();
        map.disableDoubleClickZoom();
        var centerMarker = new BMap.Marker(point);
        map.addOverlay(centerMarker);
        map.panTo(centerMarker);
        var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(scaleControl);
        map.enableScrollWheelZoom();
    }

    //设置考勤点区域范围,并让地图缩放级别能显示当前位置和考勤区域在可视范围
    function setCircleLocation(lng, lat) {
        currlng = lng;
        currlat = lat;
        var scurrlng = currlng - 0.01;
        var ecurrlng = currlng + 0.01;
        var scurrlat = currlat - 0.01;
        var ecurrlat = currlat + 0.01;

        Mobile_NS.SQL("select jd,wd,kqfw,szdd,ddbh from uf_kqdd where cast(jd as numeric(18,6))>{scurrlng} and cast(jd as numeric(18,6))<{ecurrlng} and cast(wd as numeric(18,6))>{scurrlat} and cast(wd as numeric(18,6))<{ecurrlat} order by (Square(cast(jd as numeric(18,6))-{currlng})+Square(cast(wd as numeric(18,6))-{currlat})) desc ;scurrlng="
            + scurrlng + ";ecurrlng=" + ecurrlng + ";scurrlat=" + scurrlat + ";ecurrlat=" + ecurrlat + ";currlng=" + currlng + ";currlat=" + currlat, function (result) {

                if (result.length > 0) {
                    for (var i = 0; i < result.length; i++) {
                        var kq_lng = result[i].jd;
                        var kq_lat = result[i].wd;
                        var kq_radius = result[i].kqfw;
                        kqdd = result[i].szdd;
                        kqdbh = result[i].ddbh;
                        var point = new BMap.Point(kq_lng, kq_lat);
                        var circle = new BMap.Circle(point, kq_radius, { strokeColor: "#FF33FF", strokeWeight: 3, strokeOpacity: 0.2, fillColor: "#1791fc", fillOpacity: 0.05 }); //创建圆
                        //画到地图上面
                        map.addOverlay(circle);
                        kqlng = kq_lng;
                        kqlat = kq_lat;
                        kqfw = kq_radius;
                    }
                }
                updateRecordView();
            });
    }

    function isMylocalPointInCircle() {
        var centerpoint = new BMap.Point(kqlng, kqlat);
        var currpoint = new BMap.Point(currlng, currlat);
        var circle = new BMap.Circle(centerpoint, kqfw, { strokeColor: "#FF33FF" }); //创建圆
        if (BMapLib.GeoUtils.isPointInCircle(currpoint, circle)) {//在范围
            return true;
        } else {
            return false;
        }
    }

    //按钮显示的文字
    function btnshowText(btnlocation, jsonAll) {
        var flag = checkiswaiqing(btnlocation, jsonAll);
        if (flag) {
            return "外勤打卡";

        } else {
            return "打卡";
        }
    }

    //判断是否是外勤打卡
    function checkiswaiqing(btnlocation, jsonAll) {
        var jsontime = jsonAll.jsontime;

        if (jsontime[btnlocation].iswaiqing || (!isMylocalPointInCircle() && (jsonAll.shiftType == 'WaiQin'||jsonAll["groupID"]== '65'||jsonAll["groupID"]== '64') && curraddress != undefined && curraddress.indexOf("中山") != -1)) {//不在范围内但在中山市内则且属于外勤排班组属于外勤打卡
            return true;

        } else {
            return false;
        }
    }

    //提交按钮
    function dk(currbtnlocations, jsonAll) {
        var jsontime = jsonAll.jsontime;
        if (currlng == undefined || currlng == null) {
            Mobile_NS.Alert("定位尚未完成，请稍后");
            return;
        }
        var datetime = getCurrentDateformat('yyyy-MM-dd hh:mm');
        var iscandk = iscandkbtn(currbtnlocations, jsonAll, datetime);//能否打卡
        if (iscandk == false) {
            Mobile_NS.Alert("当前时间不能打卡时间内");
            return;
        }
        var currbanci = jsontime[currbtnlocations];
        if (currbanci.sbxb == 1) {//如果是下班打卡，则提示早退确认
            if (dateTimeStrCompare(datetime, currbanci.dktime) < 0) {
                var r = confirm("是否早退打卡!");
                if (r == false) {
                    return;
                }

            }
        };

        if (!checkiswaiqing(currbtnlocations, jsonAll)) {//非外勤
            kqinsertDB(0, currbtnlocations, jsonAll, datetime);
        } else {
            kqinsertDB(1, currbtnlocations, jsonAll, datetime);
            // Mobile_NS.Confirm("是否进行外勤打卡", "外勤打卡确认",
            //     ["否", function () { }],
            //     ["是", function () { kqinsertDB(1, currbtnlocations, jsonAll, datetime); }]

            // );
        }

    }
    //插入考勤数据
    function kqinsertDB(kqlx, currbtnlocations, jsonAll, datetime) {
        var jsontime = jsonAll.jsontime;

        var kqdjwd = currlng + "," + currlat;
        var currbanci = jsontime[currbtnlocations];
        if (kqlx == 1) {//如果是外勤，则将定位位置作为考勤点
            kqdd = curraddress;
            kqdbh = "";
        }
        Mobile_NS.showLoader();
        var paramjson = {
            "type": 1,
            "curruserid": curruserid,
            "kqrq": currentDate,
            "kqsj": getCurrentTime(),
            "kqdd": kqdd,
            "kqdjwd": kqdjwd,
            "kqdkjd": currlng,
            "kqdkwd": currlat,
            "curraddress": curraddress,
            "kqlx": kqlx,
            "pbsj": currbanci.time,
            "sbxb": currbanci.sbxb,
            "kqdbh": kqdbh,
            "bcbh": jsonAll.shiftType,
            "isflow": 0,
            "dkcard": jsontime[currbtnlocations].card,
            "dkcardstatus": iscardstatus(currbtnlocations, jsonAll, datetime),
            "flowdataid": null,
            "day": jsonAll.day
        };
        console.info("paramjson");
        console.info(paramjson);
        Mobile_NS.ajax("/mobilemode/zsws/kaoqinDaKa2.jsp", paramjson, function (responsedata) {

            var responseText = {};
            if (typeof (responsedata) == 'object') {
                responseText = responsedata;
            } else {
                responseText = $.parseJSON(responsedata);
            }
            console.info("responseText");
            console.info(responseText);

            if (responseText.status) {
                Mobile_NS.Alert("您已成功打卡");
                updateRecordView();
            } else {
                Mobile_NS.Alert("打卡失败");
                Mobile_NS.hideLoader();
            }

        });
        //3秒后关闭loading,防止后台请求过长或错误，导致loading不能关闭
        setTimeout(function () {
            Mobile_NS.hideLoader();
        }, 5000);
    }

    //更新记录显示div
    function updateRecordView() {

        var datetime = getCurrentDateformat('yyyy-MM-dd hh:mm');
        var userid = curruserid;
        // if (curruserid == 1) {
        //     userid = 4;
        // }
        Mobile_NS.ajax("/mobilemode/zsws/kaoqinDaKa2.jsp", { "curruserid": userid, "currdatetime": datetime, "type": 2 }, function (responsedata) {
            console.info(responsedata);
            var data = {};
            if (typeof (responsedata) == 'object') {
                data = responsedata;
            } else {
                data = $.parseJSON(responsedata);
            }
            var btnlocation = data.btnlocation;
            var jsontime = data.jsontime;
            var content = "";
            for (var index = 0; index < jsontime.length; index++) {
                var valueindex = jsontime[index];
                content += '<div class="recordDiv"><ul class="disc">';
                content += '<li';
                if (index == data.currentBanciIndex) {
                    content += ' class="active"';
                }
                content += '>'; //闭合括号li标签
                if (valueindex.sbxb == 0) {
                    content += "上班时间&nbsp;" + valueindex.time + '&nbsp;' + valueindex.content;
                } else {
                    content += "下班时间&nbsp;" + valueindex.time + '&nbsp;' + valueindex.content;
                }
                content += '</li>';//闭合li标签
                if (valueindex.iscard == 0) {//缺卡
                    content += '<li class="noneBold "><span class="juhonglabel">缺卡</span></li><li class="none"><span>&nbsp;&nbsp;</span></li>';
                } else if (valueindex.iscard == 1) {//已打卡
                    content += '<li class="noneBold ">打卡时间&nbsp;' + valueindex.kqsj;//打卡时间
                    if (valueindex.kqlx == 1) {//外勤打卡
                        content += '&nbsp;<span class="greenlabel">外勤</span>';//外勤标签
                    }
                    if (valueindex.dkcardstatus == 0 && valueindex.kqlx == 0) {//非外勤准时打卡
                        content += '&nbsp;<span class="greenlabel">正常</span>';//外勤标签
                    } else {
                        if (valueindex.dkcardstatus == 1) {
                            content += '&nbsp;<span class="juhonglabel">迟到</span>';
                        } else if (valueindex.dkcardstatus == 2) {
                            content += '&nbsp;<span class="juhonglabel">早退</span>';
                        }
                    }
                    content += '</li>';//li闭合
                    //打卡地点
                    content += '<li class="none"><span class="positionImage"></span><span>' + valueindex.kqdd + '</span></li>';
                } else { //还没到打卡时间或正处于打卡但没打卡
                    content += '<li class="noneBold "></li><li class="none"><span></span></li>';

                }

                content += '</ul></div>';
            }

            $("#record").html(content);
            console.info("打卡按钮所处班次：" + btnlocation);
            $("#record").children("div").eq(btnlocation).append(showBtnDiv(btnlocation, data));
            updateBtnCss(btnlocation, data, datetime);
            updatepageTitle(data);
            $("#dk_button").unbind();
            $("#dk_button").on('click', function () {
                $('#dk_button').removeClass('btn').removeClass('btnorange').removeClass('btndisable');
                $('#dk_button').addClass('btndisable');
                dk(btnlocation, data);
                $("#dk_button").unbind();
            });
            $("#waiqing").unbind();
            $("#waiqing").on('click', function () {
                shenqingwaiqing(btnlocation, data);

            });

        });

        setTimeout(function () {
            Mobile_NS.hideLoader();
        }, 5000);
    }

    function showBtnDiv(btnlocation, jsonAll) {
        var jsontime = jsonAll.jsontime;
        if (btnlocation >= jsontime.length) {
            return "";
        }
        var divbtndom = '<div style="text-align:center;"><button class="btn" id="dk_button" >';
        divbtndom += ' <span id="btntext">打卡</span><br /><span class="timeSpan" id="showCurrTime">';
        divbtndom += getCurrentTime() + '</span></button>';
        //正常班且没有申请外勤打卡的才显示外勤申请按钮
        if ((jsonAll.shiftType == 'Nor' || jsonAll.shiftType == 'Nor2' || jsonAll.shiftType == 'JiaBan' || jsonAll.shiftType == 'PRJB') && !jsontime[btnlocation].iswaiqing) {
            divbtndom += '<button id="waiqing">外勤<br/>申请</button>';
        }
        divbtndom += '</div>';
        return divbtndom;
    }

    //更新导航栏文字
    function updatepageTitle(jsonAll) {
        $('.navHeaderContainer>.small-title').children('#smalltitle').remove();
        var pagetitle = '<span id="smalltitle" style="color:blue;">' + jsonAll.title + '</span>';
        $('.navHeaderContainer>.small-title').append(pagetitle);
    }
    //更新按钮显示样式
    function updateBtnCss(btnlocation, jsonAll, datetime) {
        if (btnlocation >= jsonAll.jsontime.length) {//没有打卡按钮
            Mobile_NS.hideLoader();
            return;
        }
        console.info(btnshowText(btnlocation, jsonAll));
        $('#dk_button>#btntext').text(btnshowText(btnlocation, jsonAll));
        $('#dk_button>#showCurrTime').text(getCurrentTime());

        if (iscandkbtn(btnlocation, jsonAll, datetime)) {
            if (iscardstatus(btnlocation, jsonAll, datetime) == 0) {
                $('#dk_button').removeClass('btn').removeClass('btnorange').removeClass('btndisable');
                $('#dk_button').addClass('btn');
            } else {
                $('#dk_button').removeClass('btn').removeClass('btnorange').removeClass('btndisable');
                $('#dk_button').addClass('btnorange');
            }

        } else {
            $('#dk_button').removeClass('btn').removeClass('btnorange').removeClass('btndisable');
            $('#dk_button').addClass('btndisable');
        }
        Mobile_NS.hideLoader();
    }

    //判断当前时间是0正常1迟到2早退
    function iscardstatus(btnlocation, jsonAll, datetime) {
        var jsontime = jsonAll.jsontime;
        var status = 0;
        var currthisjsonTime = jsontime[btnlocation];
        var currthisDateTime = datetime;
        if (currthisjsonTime.sbxb == 0 && dateTimeStrCompare(currthisDateTime, currthisjsonTime.dktime) == 1) {
            status = 1;
        }
        if (currthisjsonTime.sbxb == 1 && dateTimeStrCompare(currthisDateTime, currthisjsonTime.dktime) == -1) {
            status = 2;
        }
        return status;
    }
    //判断传入班次能否打卡
    function iscandkbtn(thisbtnindex, jsonAll, currdatetime) {
        var jsontime = jsonAll.jsontime;
        var index = thisbtnindex;
        var jsonindex = jsontime[index];
        var currdatetime = currdatetime;
        //大于等于scan，小于等于endT
        if (dateTimeStrCompare(currdatetime, jsonindex.dkstart) > -1 && dateTimeStrCompare(currdatetime, jsonindex.dkend) < 1) {
            //时间内允许打卡,继续判断范围内是否能打卡,本次卡为外勤打卡中山范围内，或者是外勤班中山范围内，或者在考勤点区域则都可以打卡
            var centerpoint = new BMap.Point(kqlng, kqlat);
            var currpoint = new BMap.Point(currlng, currlat);
            var circle = new BMap.Circle(centerpoint, kqfw, { strokeColor: "#FF33FF" }); //创建圆
           //在范围内，申请外勤打卡班次，不在范围内但在中山市内则且属于外勤排班组属于外勤打卡
           if (BMapLib.GeoUtils.isPointInCircle(currpoint, circle)) {
                return true;
            } else if(jsontime[thisbtnindex].iswaiqing && curraddress != undefined && curraddress.indexOf("中山") != -1) {
                return true;
            }else if(jsonAll.shiftType == 'WaiQin'&& curraddress != undefined && curraddress.indexOf("中山") != -1){
                return true; 
            }
            //打外勤班的轮班组
            else if((jsonAll["groupID"] == '65'||jsonAll["groupID"] == '64')&& curraddress != undefined && curraddress.indexOf("中山") != -1){
                return true; 
            }
            else{
                return false;
            }

        } else {
            return false;
        }
    }
    function shenqingwaiqing(btnlocation, jsonAll) {
        var jsontime = jsonAll.jsontime;
        var result = prompt('请输入外勤地点或原因(大于6字)', '');
        if (result !== null && result.length > 5) {
            var userid = curruserid;
            var date = new Date();
            var currentDate = date.format("yyyy-MM-dd");
            var currentTime = date.format("hh:mm:ss");
            var jsonthiscard = jsontime[btnlocation];
            Mobile_NS.ajax("/CustomJspFile/HR/wqqd_remind.jsp", { userid: userid, currentDate: currentDate, currentTime: currentTime, card: jsonthiscard.card, cardsj: jsonthiscard.time, remake: result }, function (responseText) {
                Mobile_NS.Alert("已给您的上级领导发送通知，本次打卡可以进行外勤打卡");
                $('#waiqing').css('display', 'none');
                jsontime[btnlocation].iswaiqing = true;
                $('#dk_button>#btntext').text(btnshowText(btnlocation, jsonAll));
            });
        } else if (result == null) {

        } else {
            shenqingwaiqing(btnlocation, jsonAll);
        }

    }
</script>